<template>
  <div
    class="visitCard_box"
    v-for="(item1, index) in visitCardBOX"
    :key="index"
  >
    <div class="card_pic"><img :src="item1.cover" style="width: 200%;height:150%" alt="" /></div>
    <div class="card_allinfo">
      <div class="albumName">{{ item1.name }}</div>
      <div class="author">{{ item1.author }}&nbsp;&nbsp;{{item1.birth}}</div>
      <div class="albumInfo">{{ item1.description }}</div>
    </div>
    <div class="card_data_box">
        <div class="concern">关注&nbsp;<span>{{item1.fans}}</span></div>
        <div class="comment">评论&nbsp;<span>{{item1.comments}}</span></div>
    </div>
    <div class="card_btn_box">
      <!-- <div class="card_btn1">
        <img
          :src="btn1"
          style="width: 18px; height: 18px"
          @error="imgOnerror($event)"
          alt=""
        />
      </div> -->
      <!-- <div class="card_btn2">
        <img
          :src="btn2"
          style="width: 14px; height: 19px"
          @error="imgOnerror($event)"
          alt=""
        />
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "visitCard",
  props: {
      visitCardBOX:Array,
  },
  components: "",
  data() {
    return {
       btn1: require("../../assets/play.png"),
          btn2: require("../../assets/collect.png"),
    };
  },
};
</script>
<style scoped>
.visitCard_box {
  position: absolute;
  top: 0 ;
    display: flex;
    align-items: center;
    width: 1156px;
height: 166px;
background: #EFEFEF;
padding: 26px 22px 30px;
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.34);
}
.card_pic {
    width: 167px;
height: 167px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.card_allinfo {
    width: 633px;
margin: 0 0px 0 78px;
letter-spacing: 1px;

}
.albumName {
/* width: 86px;
height: 20px; */
font-size: 20px;
font-family: Microsoft YaHei UI;
font-weight: bold;
color: #21262C;
   white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.author {
    /* width: 68px;
height: 17px; */
margin: 10px 0;
font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 300;
color: #21262C;
   white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.albumInfo {
    /* width: 164px;
height: 17px; */
font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 300;
color: #21262C;
   white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
.card_data_box {
margin: 140px 0 0 0;
width: 194px;
display: flex;
align-items: center;
letter-spacing: 1px;
}

.concern {
    margin: 0 16px 0 16px;
}
.concern, .comment{
display: flex;
align-items: center;
/* width: 34px;
height: 16px; */
font-size: 16px;
font-family: Microsoft YaHei UI;
font-weight: 300;
color: #21262C;
/* line-height: 68px; */
}
.card_data_box span {
    /* width: 32px;
height: 14px; */
font-size: 18px;
font-family: Impact;
font-weight: 400;
color: #659274;

}
.card_btn_box {
margin: 140px 0 0 16px;
/* width: 194px; */
display: flex;
align-items: center;
}
.card_btn1 {
    margin: 0 10px 0 4px;
}
.card_btn2 {
    margin: 0 15px 0 0px;
}
</style>
